<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bookshelf - 高品质书架与阅读空间</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind -->
    
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="index.css">
</head>
<body class="bg-light text-accent antialiased theme-transition" id ="product-body">
     <!-- 导航栏 -->
     <header class="fixed w-full bg-white/90 dark:bg-dark-card backdrop-blur-sm shadow-md z-50 transition-all duration-300 theme-transition" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 dark:text-dark-text">
            <div class="flex justify-between items-center py-4">
                <!-- Logo -->
                 <a href="#" class="flex item-center dark:text-dark-text space-x-2">
                    <i class="fa fa-book text-primary text-2xl theme-transition"></i>
                    <span class="text-lg font-bold">Bookshelf</span>
                 </a>
                 <!-- 桌面端导航菜单 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="/index.html" class="text-accent hover:text-primary font-medium transition-custom theme-transition dark:text-dark-text">首页</a>
                    <a href="#products" class="text-accent hover:text-primary font-medium transition-custom theme-transition dark:text-dark-text">产品</a>
                    <a href="#cases" class="text-accent hover:text-primary font-medium transition-custom theme-transition dark:text-dark-text">案例</a>
                    <a href="#about" class="text-accent hover:text-primary font-medium transition-custom theme-transition dark:text-dark-text">关于</a>
                    <button class="bg-primary text-accent hover:bg-primary/90 hover:shadow-md shadow-md px-4 py-2 rounded-md hover:bg-primary-dark theme-transition dark:text-dark-text">
                        加入我们
                    </button>
                    <!-- 黑夜模式切换按钮 -->
                    <button id="theme-toggle" class="text-accent hover:text-primary font-medium transition-custom theme-transition">
                        <i class="fa fa-moon-o text-accent  dark:text-dark-text theme-transition"></i>
                    </button>
                </nav>
                <!-- 移动端菜单按钮和主题切换 -->
                <div class="flex items-center md:hidden gap-4">
                    <button id="mobile-theme-toggle">
                        <i class="fa fa-moon-o text-accent dark:text-dark-text theme-transition"></i>
                    </button>
                    <button class="text-accent text-2xl dark:text-dark-text theme-transition" id="menu-toggle">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-- 移动端导航菜单 -->
        <div class="md:hidden bg-white dark:bg-dark-card hidden shadow-md absolute w-full theme-transition" id="mobile-menu">
            <div class="flex flex-col items-center justify-center gap-4 py-8">
                <a href="#" class="text-accent hover:text-primary dark:text-dark-text font-medium transition-custom theme-transition">首页</a>
                <a href="#products" class="text-accent dark:text-dark-text hover:text-primary font-medium transition-custom theme-transition">产品</a>
                <a href="#cases" class="text-accent dark:text-dark-text hover:text-primary font-medium transition-custom theme-transition">案例</a>
                <a href="#about" class="text-accent dark:text-dark-text hover:text-primary font-medium transition-custom theme-transition">关于</a>
                <button class="bg-primary text-white dark:text-dark-text hover:bg-primary/90 hover:shadow-md shadow-md px-4 py-2 rounded-md hover:bg-primary-dark theme-transition">
                    加入我们
                </button>
            </div>
        </div>
    </header>

    <section class="relative h-screen flex items-center justify-center overflow-hidden" id="products">
        <!-- 轮播图轮播 -->
        <div class="carousel w-full h-full">
            <div id="slide1" class="carousel-item relative w-full h-full">
                <img src="https://picsum.photos/id/1011/1920/1080" class="w-full h-full object-cover" alt="">
                </img>
            </div>
         </div>
    </section>


    <script src="tailwind.config.js"></script>
</body>